<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>实时更新数据的jQuery图表插件DEMO演示</TITLE>

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/highcharts.js"></script>

<script type="text/javascript">
	$(function() {
		// 设置全局的时区
		Highcharts.setOptions({
			global : {
				useUTC : false
			}
		});
		new Highcharts.Chart({
			chart : {
				renderTo : 'container', // 放置图表的DIV容器对应页面的id属性
				type : 'spline', // 图表类型line, spline, area, areaspline
				// 事件
				events : {
					load : function() {
						var series = this.series[0];
						// 每隔1秒钟，图表更新一次，y数据值在0-100之间的随机数
						setInterval(function() {
							var x = (new Date()).getTime();
							var y = Math.random() * 100;
							series.addPoint([ x, y ], true, true);
						}, 1000);

					},
				}
			},
			title : {
				text : '模拟心电图' // 图表标题
			},
			subtitle : {
				text : 'XXXX' // 副标题
			},
			// x轴
			xAxis : {
				// X轴为日期时间类型
				type : 'datetime',
				// X轴标签间隔
				tickPixelInterval : 50
			},
			// y轴
			yAxis : {
				title : '',
				max : 100, // Y轴最大值
				min : 0
			},
			// 右下角显示的LOGO
			credits : {
				text : 'demo', // 设置LOGO区文字
				href : 'http://www.javakfz.com' // 设置LOGO链接地址
			},
			// 是否启用导出功能，默认为true
			exporting : {
				enabled : true
			},
			legend : {
				enabled : false
			},
			// 当鼠标悬置数据点时的格式化提示
			tooltip : {
				crosshairs : true,
				formatter : function() {
					return '心率'
							+ Highcharts.dateFormat('%H:%M:%S', this.x) + Highcharts.numberFormat(this.y, 2);
				}
			},
			plotOptions : {
				column : {
					dataLabels : {
						enabled : true
					},
					pointPadding : 0.2,
					borderWidth : 0
				}
			},
			// 设置默认数据
			series : [ {
				data : (function() { // 设置默认数据，
					var data = [];
					var time = (new Date()).getTime();
					var i;

					for (i = -19; i <= 0; i++) {
						data.push({
							x : time + i * 1000,
							y : Math.random() * 100
						});
					}
					return data;
				})()
			} ]
		});
	});
</script>
</HEAD>

<BODY>

<div id="container" style="width:800px;height:400px;margin:0 auto;"></div>
<div style="text-align:center;clear:both;">
</div>
</BODY>
</HTML>
